<template>
	<view class="search_box">
		<view class="search_input_box">
			<uni-icons type="search" size="60rpx" color="#787878"></uni-icons>
			<input type="text" class="search_input" placeholder="产品规格/系列/品牌" v-model="search_input" />
			<button class="search_btn" @click="search_btn">搜索</button>
		</view>
		<view class="history_box">
			<view class="history_title">
				<text>历史搜索</text>
				<uni-icons type="trash" size="40rpx" @click="del"></uni-icons>
			</view>
			<view class="tags_box">
				<view class="tags" v-for="(item,index) in history" :key="index" @click="search_input=item;search_btn()">
					{{item}}
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from "vue"
	import {
		onShow
	} from "@dcloudio/uni-app"
	const search_input = ref('')
	const history = ref([])
	const hot = ref(['cw', 'cm', 'cs', '开关'])
	onShow(() => {
		let res = uni.getStorageSync("keyword")
		console.log(res,44)
		history.value = res?res:[]
		console.log(history.value,46)
	})

	function search_btn() {
		// console.log(search_input.value);
		if(!history.value.includes(search_input.value)){
			history.value.push(search_input.value)
			uni.setStorageSync('keyword', history.value)
		}
		uni.navigateTo({
			url: `/index/pages/search/result?goods_name=${search_input.value}&title=${search_input.value}`
		})
	};
	function del(){
		history.value = []
		uni.setStorageSync('keyword', history.value)
	}
	
</script>

<style>
	.search_box {
		width: 100vw;
		height: 100vh;
		background-color: #fff;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.uni-navbar,
	.history_box,
	.search_input_box,
	.hot_box {
		width: 90%;
	}

	.search_input_box,
	.history_box,
	.tags_box,
	.hot_box {
		margin-top: 30rpx;
	}
	
	.tags_box{
		display: flex;
		flex-wrap: wrap;
		gap: 10rpx;
	}
	.history_box {
		margin-bottom: 30rpx;
	}

	:deep(.uni-navbar__header-btns) {
		width: 50% !important;
	}

	:deep(.uni-navbar__header-btns .uni-icons) {
		font-weight: bold;
		font-size: 50rpx !important;
		color: black !important;
	}

	:deep(.uni-navbar-btn-text>uni-text) {
		font-weight: bold;
		font-size: 30rpx !important;
		color: black !important;
	}

	.search_input_box {
		display: flex;
		align-items: center;
		border: 2rpx solid #ccc;
		border-radius: 10rpx;
	}

	.search_input_box .uniui-search {
		padding: 0 20rpx;
	}

	.search_input {
		flex: 1;
		font-size: 30rpx;
	}

	.search_btn {
		font-size: 30rpx;
		background-color: #1296db;
		color: #fff;
	}

	.history_title,
	.hot_title {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 30rpx;
		color: #787878;
	}

	.tags_box {
		width: 100%;
		display: flex;
	}

	.tags {
		margin-right: 20rpx;
		width: 140rpx;
		height: 50rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 15rpx;
		font-size: 30rpx;
		border: 2rpx solid #007aff;
	}
</style>